// 问题的编辑 js

import { ppa } from "/static/js/edit/base.js";
export {add_question, input_all, get_truly, add_height, edit_all_value}

let edit_all = ['1', '2', '3']; // 存放该问题中是所有问题编号 刚开始默认三个
let edit_all_value = []; // 存放所有input的内容
let edit_cnt = 4; // 增加选项的序号

// 刚开始默认的三个选项
// 注意由于是动态生成的, 需要绑定一下class

$(document).on('click', `.iconfontadd1`, (e) => {
    let $div = $('.edit1');
    add_after($div);
    add_new_click();
});

$(document).on('click', '.iconfontadd2', () => {
    let $div = $('.edit2');
    add_after($div);
    add_new_click();
});

$(document).on('click', '.iconfontadd3', () => {
    let $div = $('.edit3');
    add_after($div);
    add_new_click();
});

// 每次增加的div对象
let add_after = ($div) => {
    if (edit_all.length >= 10) {
        return; // 最多十个选项
    }

    // 在其后增加div
    $div.after(`<div class="edit${edit_cnt}" id="iconfont${edit_cnt}">
                    <input type="text" class="quesText quesText${edit_cnt}" placeholder="选项${edit_cnt}"><i
                    class="iconfont icon-shangyi icon-up iconfont-spe iconfontup${edit_cnt}" id="iconfontup${edit_cnt}"></i><i
                    class="iconfont icon-xiayi icon-down iconfont-spe iconfontdown${edit_cnt}" id="iconfontdown${edit_cnt}"></i><i
                    class="iconfont icon-zengjia icon-add iconfont-spe iconfontadd${edit_cnt}" id="iconfontadd${edit_cnt}"></i><i
                    class="iconfont icon-jianshao icon-del iconfont-spe iconfontdel${edit_cnt}" id="iconfontdel${edit_cnt}"></i>
                    <br>
                </div>`);
    
    edit_all.push(edit_cnt); // 添加元素
};

// 默认开始的三个删除按钮
$(document).on('click', '.iconfontdel1', () => {
    let $div = $('.edit1');
    del_div($div);
});

$(document).on('click', '.iconfontdel2', () => {
    let $div = $('.edit2');
    del_div($div);
});

$(document).on('click', '.iconfontdel3', () => {
    let $div = $('.edit3');
    del_div($div);
});

// 删除div
let del_div = ($div) => {
    if (edit_all.length === 1) return; // 至少一个选项
    $div.remove();
    // 删除数组中的对应数据
    edit_all.pop();
    for (let i = 0; i < edit_all.length; i++)
        if ($div === $(`.edit${edit_all[i]}`)) {
            edit_all.splice(i, 1);
            break;
        }
};

// 默认开始的三个上移按钮
$(document).on('click', '.iconfontup1', () => {
    let $div = $('.edit1');
    change_up($div);
});

$(document).on('click', '.iconfontup2', () => {
    let $div = $('.edit2');
    change_up($div);
});

$(document).on('click', '.iconfontup3', () => {
    let $div = $('.edit3');
    change_up($div);
});

// 默认开始的三个下移按钮
$(document).on('click', '.iconfontdown1', () => {
    let $div = $('.edit1');
    change_down($div);
});

$(document).on('click', '.iconfontdown2', () => {
    let $div = $('.edit2');
    change_down($div);
});

$(document).on('click', '.iconfontdown3', () => {
    let $div = $('.edit3');
    change_down($div);
});

// 获取自身div的input value值
let get_self_val = ($div) => {
    let t = $div.find('.quesText');
    if (t.val() === undefined) return false;
    if (t.val().length <= 0) return t.attr('placeholder');
    return t.val();
};

// 获取自身div上一级兄弟的input value值
let get_prev_val = ($div) => {
    let t = $div.prev().find('.quesText');
    if (t.val() === undefined) return false;
    if (t.val().length <= 0) return t.attr('placeholder');
    return t.val();
};

// 获取自身div下一级兄弟的input value值
let get_next_val = ($div) => {
    let t = $div.next().find('.quesText');
    if (t.val() === undefined) return false;
    if (t.val().length <= 0) return t.attr('placeholder');
    return t.val();
};

// 选项上移交换
let change_up = ($div) => {
    let $prev = get_prev_val($div);
    let $self = get_self_val($div);
    if ($prev) {
        if ($prev.substr(0, 2) === "选项") $div.find('.quesText').attr('placeholder', $prev);
        else $div.find('.quesText').val($prev);
        if ($self.substr(0, 2) === "选项") $div.prev().find('.quesText').attr('placeholder', $self);
        else $div.prev().find('.quesText').val($self);
    }
}

// 选项下移交换
let change_down = ($div) => {
    let $next = get_next_val($div);
    let $self = get_self_val($div);
    if ($next) {
        if ($next.substr(0, 2) === "选项") $div.find('.quesText').attr('placeholder', $next);
        else $div.find('.quesText').val($next);
        if ($self.substr(0, 2) === "选项") $div.next().find('.quesText').attr('placeholder', $self);
        else $div.next().find('.quesText').val($self);
    }
}

// 为新的选项增加鼠标点击效果
let add_new_click = () => {
    let $objectadd = $(`.iconfontadd${edit_cnt}`);   // 取得对应的增加按钮
    let $objectdel = $(`.iconfontdel${edit_cnt}`);   // 取得对应的删除按钮
    let $objectup = $(`.iconfontup${edit_cnt}`);     // 取得对应的上移按钮
    let $objectdown = $(`.iconfontdown${edit_cnt}`); // 取得对应的下移按钮

    let $div = $(`.edit${edit_cnt}`); // 取得对应的整个div
    if (edit_all.length < 10) edit_cnt++; // 在这里才增加div的编号 最多十个问题

    $objectadd.click(() => { // 增加事件
        // 在其后增加div
        add_after($div);
        add_new_click(); // 递归调用
    });

    $objectdel.click(() => { // 删除事件
        del_div($div);
    });

    $objectup.click(() => {
        change_up($div);
    });

    $objectdown.click(() => {
        change_down($div);
    });
};

// 获取所有的input内容
let input_all = () => {
    // edit_all_value.splice(0, edit_all_value.length);

    let $idx = $('.text-title'); // 原来
    // 标题
    let ans = get_self_val($idx);
    // edit_all_value.push(get_self_val($idx));
    // 选项部分
    $idx = $('.edit1'); // 原来
    // $idx = $edit;
    for (let i = 0; i < edit_all.length; i++) {
        // edit_all_value.push(get_self_val($idx));
        ans += ' ' + get_self_val($idx);
        $idx = $idx.next();
    }
    edit_all_value.push(ans);

    return ans;
};

// 保存编辑
$(document).on('click', '.text-commit', (e) => {
    // 隐藏选项编辑界面
    $('.edit').hide();

    // 增加问题
    if ($(ppa).hasClass('type_radio')) add_question('radio');
    else if ($(ppa).hasClass('type_checkbox')) add_question('checkbox');

    $('.edit-content').hide();

    // 解绑界面不可动
    $('body, html').removeClass('add-spec');
});

let change_cnt = 4;
// 根据选项生成问题
let add_question = (t) => { // 参数： 单选/多选
    let $div = $(ppa).find('.question');
    let arr = get_truly();
    console.log(arr);
    $(ppa).find('.questions-title').text(arr[0]);
    let n = change_cnt - arr.length;
    if (n > 0) {
        for (let i = arr.length; i < arr.length + n; i++) {
            $(ppa).find(`.label-${i}`).remove();
            add_height($(ppa), -20);
            add_height($('.option'), -20);
            add_height($('.all'), -20);
        }
    } else if (n === 0) {
        for (let i = 1; i < change_cnt; i++) {
            $(ppa).find(`.questions${i}`).text(arr[i]);
        }
    } else {
        for (let i = 1; i < change_cnt; i++) {
            $(ppa).find(`.questions${i}`).text(arr[i]);
        }
        for (let i = change_cnt; i < arr.length; i++) {
            $div.append(`
                <div class="label-${i}"><label><input type=${t} name="q1" /> <span class="questions${i}"></span></label><br /></div>`
            );
            add_height($(ppa), 20);
            add_height($('.option'), 20);
            add_height($('.all'), 20);
            $(ppa).find(`.questions${i}`).text(arr[i]);
        }
    }
    change_cnt = arr.length;
};

// div增加高度 
let add_height = ($div, height) => {
    $div.height($div.height() + height);
};

// 筛掉false
let get_truly = () => {
    let arr = input_all().split(' ');
    let res = [];
    for (let i = 0; i < arr.length; i++) {
        if (arr[i] === 'false') break;
        res.push(arr[i]);
    }
    return res;
};